<template>
    <div class="template">
        <h3>示例</h3>
        <!-- 一对多主子表 -->
        <more-table-template :tableColumns="tableColumns" :childrensColumns="childrensColumns" ref="moreTable"></more-table-template>
        <div class="markdown-body">
            <moreTableMD></moreTableMD>
        </div>
    </div>
</template>
<script>
import MoreTableTemplate from '@/components/moreTableTemplate'
import moreTableMD from "../md/moreTableMD.md"
import {queryApi} from '@/api/api'
export default {
    name:"moreTable",
    components:{
        MoreTableTemplate,
        moreTableMD
    },
    data(){
        return{
            // 主表数据
            tableColumns:{
                onlyId:"id",
                dragStateFlag:true,
                tableRowClassName:this.tableRowClassName,//行变色
                // 表格接口地址  详细地址在api配置
                // url:urlCommon.queryApi.url,
                dragColumn:false,//是否拖拽表头
                apiName: "",//"queryApi"
                childApiName:"",//queryApi
                tableStyle: 1, //1--主子表格上下布局  2---主子表格左右布局
                // 风格主题
                tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
                    {prop: 'classificationStr', label: '商品分类', align: 'center',type:"",fixed:'',isShow:false},
                    {prop: 'levelString',label: '等级', align: 'center',type:"dictionary",fixed:'',filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}],propString:"level",isShow:true},
                    // propString 最后要转换为文字的字段 formatterArrayString:"LEVEL",
                    //filterProp:自定义数据字典  filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}]
                    //formatterArrayString:接口返回数据字典数据名 例如:"LEVEL" "IS_MARRY"
                    {prop: 'levelDesc', label: '审核结果', align: 'center',type:"",fixed:'',isShow:true,isSortable:true},
                    // {prop: 'commodityTypeId', label: 'ID', align: 'center',type:"",fixed:'',isShow:true,isSortable:true},
                ],
                // 表格数据
                tableData: [
                    {id:1,childList:[{name:"xiaoliang",className:"2班",age:14,id:22}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护口罩","commodityTypeId":"10000","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}],seriesType:"pillar"}},
                    {id:2,childList:[{name:"xiaoliang",className:"2班",age:14,id:23}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}],seriesType:"pillar"}},
                    {id:3,childList:[{name:"xiaoliang",className:"2班",age:14,id:24}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:4,childList:[{name:"xiaoliang",className:"2班",age:14,id:25}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:5,childList:[{name:"xiaoliang",className:"2班",age:14,id:26}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:6,childList:[{name:"xiaoliang",className:"2班",age:14,id:27}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:7,childList:[{name:"xiaoliang",className:"2班",age:14,id:28}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:8,childList:[{name:"xiaoliang",className:"2班",age:14,id:29}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:9,childList:[{name:"xiaoliang",className:"2班",age:14,id:30}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:10,childList:[{name:"xiaoliang",className:"2班",age:14,id:31}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:11,childList:[{name:"xiaoliang",className:"2班",age:14,id:32}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:12,childList:[{name:"xiaoliang",className:"2班",age:14,id:33}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:13,childList:[{name:"xiaoliang",className:"2班",age:14,id:34}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:14,childList:[{name:"xiaoliang",className:"2班",age:14,id:35}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:16,childList:[{name:"xiaoliang",className:"2班",age:14,id:36}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:18,childList:[{name:"xiaoliang",className:"2班",age:14,id:37}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:20,childList:[{name:"xiaoliang",className:"2班",age:14,id:38}],"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '蒸发量',type: 'bar',data: [2.0, 4.9]},{name: '降水量',type: 'bar',data: [2.6, 5.9]},{name: '平均温度',type: 'line',yAxisIndex: 1,data: [2.0, 2.2]}],seriesType:"pillarLine"}},
                    
                ],
                //主表主键  主子表的时候必填
                id: "id",
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:300, //上下布局主子表250 单表450
                width:100,

            }, 
            // 子表数据
            childrensColumns:[
                {
                    childrenLabel:"tab1",
                    childrenTableDataArrName:"childList",
                    dragStateFlag:true,
                    tableRowClassName:this.tableRowClassName,//行变色
                    // 表格接口地址  详细地址在api配置
                    // url:urlCommon.queryApi.url,
                    dragColumn:false,//是否拖拽表头
                    // 风格主题
                    tooltip:"dark",
                    // 表头数据
                    columns:[
                        {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
                        {prop: 'name', label: '名字', align: 'center',type:"",fixed:'',isShow:false,isShow:true},
                        {prop: 'className',label: '班级', align: 'center',type:"dictionary",fixed:'',isShow:true},
                        {prop: 'age', label: '年龄', align: 'center',type:"",fixed:'',isShow:true},
                    ],
                    // 表格数据
                    tableData: []
                },
                {
                    childrenLabel:"tab2",
                    childrenTableDataArrName:"children2",
                    dragStateFlag:true,
                    tableRowClassName:this.tableRowClassName,//行变色
                    // 表格接口地址  详细地址在api配置
                    // url:urlCommon.queryApi.url,
                    dragColumn:false,//是否拖拽表头
                    // 风格主题
                    tooltip:"dark",
                    // 表头数据
                    columns:[
                        {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
                        {prop: 'name', label: '名字', align: 'center',type:"",fixed:'',isShow:false,isShow:true},
                        {prop: 'className', label: '科目', align: 'center',type:"",fixed:'',isShow:true},
                        {prop: 'grace',label: '成绩', align: 'center',type:"",fixed:'',isShow:true},
                    ],
                    // 表格数据
                    tableData: []
                },
            ],  
        }
    },
    methods:{

    },
    created(){
        
    }
}
</script>